import { useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, PropType, ref } from 'vue';
import { createUUID } from 'qx-util';
import {
  IHtmlItem,
  IPanelRawItem,
  IRawItemContainer,
  ITextItem,
} from '@ibiz/model-core';
import './rawitem.scss';

export const IBizRawItem = defineComponent({
  name: 'IBizRawItem',
  props: {
    type: {
      type: String,
      required: false,
    },
    content: {
      type: [String, Object],
    },
    rawItem: {
      type: Object as PropType<IRawItemContainer>,
      required: false,
    },
  },
  setup(props) {
    const ns = useNamespace('rawitem');
    let rawItem = null;
    let contentType = '';
    if (props.rawItem) {
      rawItem = props.rawItem.rawItem!;
      contentType = rawItem.contentType!;
    }
    const rawItemType = ref(props.type || contentType || '');
    const rawItemContent = ref(props.content);
    let sysImage = null;
    if (contentType === 'IMAGE') {
      sysImage = (rawItem as IPanelRawItem).sysImage;
    }
    // 传入内容
    if (contentType === 'RAW' || contentType === 'HTML') {
      if (contentType === 'RAW') {
        rawItemType.value = 'TEXT';
        rawItemContent.value = (rawItem as ITextItem).caption!;
      } else {
        rawItemContent.value = (rawItem as IHtmlItem).content!;
      }
    } else if (
      ['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(contentType!)
    ) {
      // 暂不支持
      // content = rawContent;
    } else if (contentType === 'IMAGE' && sysImage) {
      rawItemContent.value = sysImage;
    }
    // 视频类型内容参数
    const playerParams = ref({
      id: createUUID(),
      path: '',
      mute: true,
      autoplay: true,
      replay: false,
      showcontrols: true,
    });

    // 分割线类型参数
    const dividerParams = ref({
      contentPosition: 'center',
      html: '',
    });

    // 类型参数
    const alertParams = ref({
      type: 'info',
      title: '',
      closeabled: true,
      showIcon: false,
    });

    // 文本类型显示值
    const rawItemText = ref('');

    if (
      [
        'TEXT',
        'HEADING1',
        'HEADING2',
        'HEADING3',
        'HEADING4',
        'HEADING5',
        'HEADING6',
        'PARAGRAPH',
        'HTML',
      ].includes(rawItemType.value)
    ) {
      if (rawItemContent.value && typeof rawItemContent.value === 'string') {
        rawItemText.value = rawItemContent.value;
        rawItemText.value = rawItemText.value.replaceAll('&lt;', '<');
        rawItemText.value = rawItemText.value.replaceAll('&gt;', '>');
        rawItemText.value = rawItemText.value.replaceAll('&amp;nbsp;', ' ');
        rawItemText.value = rawItemText.value.replaceAll('&nbsp;', ' ');
      }
    }

    if (
      ['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(
        rawItemType.value,
      )
    ) {
      if (rawItemContent.value) {
        let rawConfig = {};
        try {
          if (typeof rawItemContent.value === 'string') {
            // eslint-disable-next-line no-new-func
            const func = new Function(`return (${rawItemContent.value});`);
            rawConfig = func();
            switch (rawItemType.value) {
              case 'VIDEO':
                Object.assign(playerParams.value, rawConfig);
                break;
              case 'DIVIDER':
                Object.assign(dividerParams.value, rawConfig);
                break;
              case 'INFO':
              case 'WARNING':
              case 'ERROR':
                alertParams.value.type = rawItemType.value.toLocaleLowerCase();
                Object.assign(alertParams.value, rawConfig);
                break;
              default:
                break;
            }
          }
        } catch {
          ibiz.log.error(`${rawItemType.value}类型自定义参数配置错误`);
        }
      }
    }
    return {
      ns,
      rawItemText,
      playerParams,
      dividerParams,
      alertParams,
      rawItemType,
      rawItemContent,
    };
  },
  render() {
    if (this.rawItemType === 'IMAGE') {
      return (
        <i-biz-icon
          class={[this.ns.e('image'), this.ns.b()]}
          icon={this.rawItemContent}
        ></i-biz-icon>
      );
    }
    if (this.rawItemType === 'TEXT') {
      return <span class={this.ns.e('text')}>{this.rawItemText}</span>;
    }
    if (this.rawItemType === 'HEADING1') {
      return <h1 class={this.ns.e('h1')}>{this.rawItemText}</h1>;
    }
    if (this.rawItemType === 'HEADING2') {
      return <h2 class={this.ns.e('h2')}>{this.rawItemText}</h2>;
    }
    if (this.rawItemType === 'HEADING3') {
      return <h3 class={this.ns.e('h3')}>{this.rawItemText}</h3>;
    }
    if (this.rawItemType === 'HEADING4') {
      return <h4 class={this.ns.e('h4')}>{this.rawItemText}</h4>;
    }
    if (this.rawItemType === 'HEADING5') {
      return <h5 class={this.ns.e('h5')}>{this.rawItemText}</h5>;
    }
    if (this.rawItemType === 'HEADING6') {
      return <h6 class={this.ns.e('h6')}>{this.rawItemText}</h6>;
    }
    if (this.rawItemType === 'PARAGRAPH') {
      return <p class={this.ns.e('paragraph')}>{this.rawItemText}</p>;
    }
    if (this.rawItemType === 'HTML') {
      return (
        <div class={this.ns.e('paragraph')} v-html={this.rawItemText}></div>
      );
    }
    if (this.rawItemType === 'VIDEO') {
      return (
        <div class={this.ns.e('video')}>
          <video
            id={this.playerParams.id}
            src={this.playerParams.path}
            autoplay={this.playerParams.autoplay}
            controls={this.playerParams.showcontrols}
            loop={this.playerParams.replay}
            muted={this.playerParams.mute}
          >
            <source src={this.playerParams.path} type='video/mp4' />
            <source src={this.playerParams.path} type='video/ogg' />
            <source src={this.playerParams.path} type='video/webm' />
            你的浏览器不支持video标签
          </video>
        </div>
      );
    }
    if (this.rawItemType === 'DIVIDER') {
      return (
        <el-divider content-position={this.dividerParams.contentPosition}>
          <span v-html={this.dividerParams.html}></span>
        </el-divider>
      );
    }
    if (
      this.rawItemType === 'INFO' ||
      this.rawItemType === 'WARNING' ||
      this.rawItemType === 'ERROR'
    ) {
      return (
        <el-alert
          title={this.alertParams.title}
          type={this.alertParams.type}
          show-icon={this.alertParams.showIcon}
          closable={this.alertParams.closeabled}
        ></el-alert>
      );
    }
    if (this.rawItemType === 'MARKDOWN') {
      return <iBizMarkDown value={this.content} disabled={true}></iBizMarkDown>;
    }
    if (['PLACEHOLDER'].includes(this.rawItemType)) {
      return <div>{this.rawItemType}类型暂未支持</div>;
    }
    return null;
  },
});
